<script setup lang="ts">
	import { ref, unref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useNotify } from '@/hooks/web/useNotify/index.js'
	import { useLocation } from '@/hooks/web/useLocation'
	import { useUserStore } from '@/stores/user'
	import { orderDetail, cancelOrder } from '@/package_tools/api/List'

	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	const { userInfo } = useUserStore()

	interface RouteParams {
		id : string
	}
	const routeParams = ref<RouteParams>({
		id: ''
	})
	onLoad((options) => {
		routeParams.value = options as RouteParams
		getDetail()
	})
	const useGetDetail = () => {
		const detailInfo = ref({})
		const fileList = ref([])

		const getDetail = async () => {
			const params = {
				...unref(routeParams)
			}
			const res = await orderDetail(params)
			detailInfo.value = res.data
			if (detailInfo.value?.receive_log?.image) {
				fileList.value = detailInfo.value.receive_log.image.split(",").map((val) => ({
					url: val
				}));
			} else {
				// 如果不存在，则设置 fileList.value 为一个空数组
				fileList.value = [];
			}
		}

		return {
			detailInfo,
			getDetail,
			fileList
		}
	}
	const { getDetail, detailInfo, fileList } = useGetDetail()

	const submitLoading = ref(false)
	const { getLocation } = useLocation()
	const submit = async (id : number) => {
		submitLoading.value = true
		try {
			const params = {
				id,
			}
			const res = await cancelOrder(params)
			showNotify({
				type: 'success',
				message: res.msg
			})
			getDetail()
		} catch (err) {
			showNotify({
				type: 'error',
				message: err.msg
			})
		} finally {
			submitLoading.value = false
		}

	}
</script>

<template>
	<view class="content">
		<view class="content-header">
			<view class="right-img">
				<image style="width: 84rpx;height: 60rpx;" src="/package_saleman/static/img/billing5.png">
				</image>
			</view>
			<view class="header-name">
				{{detailInfo.store?.name}}
			</view>
			<view class="header-text">
				订单编号： <sapn style="color: rgba(2, 14, 36, 1);">{{detailInfo.order_no}}</sapn>
			</view>
			<view class="header-text" v-if="detailInfo.driver">
				司机： <sapn style="color: rgba(2, 14, 36, 1);">{{detailInfo.driver?.name}}</sapn>
			</view>
			<view class="header-text" v-if="detailInfo.salesman">
				业务员： <sapn style="color: rgba(2, 14, 36, 1);">{{detailInfo.salesman?.rename}}</sapn>
			</view>
			<view class="booton-img">
				<image style="width: 702rpx;height: 4rpx;" src="/package_saleman/static/img/billing6.png">
				</image>
			</view>
		</view>
		<view class="content-goods">
			<view class="goods_yuan"></view>
			<view class="goods_yuan1"></view>
			<view class="goods-name">
				商品明细
			</view>
			<view class="goods-line"></view>
			<view class="goods-list">
				<up-row justify="space-between">
					<up-col span="6">
						<up-text text="商品名称" color="#646566" size="14" align="left">
						</up-text>
					</up-col>
					<up-col span="3">
						<up-text text="单价" color="#646566" size="14" align="left">
						</up-text>
					</up-col>
					<up-col span="3">
						<up-text text="数量" color="#646566" size="14" align="left">
						</up-text>
					</up-col>
				</up-row>
				<block v-for="(item, index) in detailInfo.detail" :key="index">
					<up-row justify="space-between" gutter="10">
						<up-col span="6">
							<view style="display: flex;gap: 6rpx;font-weight: 500;">
								<up-tag text="赠品" plain size="mini" v-if="item.goods_type == '2'"></up-tag>
								<up-text :text="item.goods.name" color="#020E24" size="14" align="left"></up-text>
							</view>
						</up-col>
						<up-col span="3">
							<up-text :text="item.true_price" color="#020E24" size="14" align="left"></up-text>
						</up-col>
						<up-col span="3">
							<up-text :text="item.num + item.goods_spec?.unit" color="#020E24" size="14"
								align="left"></up-text>
						</up-col>
					</up-row>
				</block>
			</view>
		</view>
		<view class="goods-mon">
			<view class="box">
				<view class="box-name">总价： </view>
				<view class="box-je">￥{{detailInfo.order_amount}}</view>
			</view>
			<view class="box">
				<view class="box-name">备注：</view>
				<view class="box-bz">{{detailInfo.remark}}</view>
			</view>
		</view>
		<view class="goods-sk">
			<view class="header">收款记录</view>
			<view class="line"></view>
			<view class="box">
				<view class="box-name">待收款：</view>
				<view class="box-bz">￥{{detailInfo.unsay_amount}}</view>
			</view>
			<view class="box">
				<view class="box-name">已支付： </view>
				<view class="box-bz">{{detailInfo.pay_amount}}</view>
			</view>
			<view class="box" v-if="fileList.length >0">
				<up-upload :fileList="fileList" :maxCount="fileList.length" :previewFullImage="true"
					:deletable="false"></up-upload>
			</view>
			<view class="goods-button" v-if="detailInfo.can_cancel == 1 && userInfo.scene_id != 1"
				@click="submit(detailInfo.id)">取消订单</view>
		</view>
		<up-notify ref="NotifyRef"></up-notify>
	</view>
</template>

<style scoped lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		background: rgba(242, 243, 245, 1);
		padding: 24rpx;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);

		/* 兼容iOS 11.2及以上 */
		.content-header {
			width: 702rpx;
			border-radius: 12px;
			background: rgba(255, 255, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;
			position: relative;

			.right-img {
				position: absolute;
				top: 0;
				right: 0;
			}

			.header-name {
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(2, 14, 36, 1);
				margin-bottom: 30rpx;
			}

			.header-text {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(100, 101, 102, 1);
				margin-bottom: 20rpx;
			}

			.booton-img {
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}

		.content-goods {
			width: 702rpx;
			border-radius: 12px;
			background: rgba(255, 255, 255, 1);
			padding: 24rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			position: relative;

			.goods_yuan {
				position: absolute;
				top: 90rpx;
				left: -10rpx;
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background: rgba(242, 243, 245, 1);
			}

			.goods_yuan1 {
				position: absolute;
				top: 90rpx;
				right: -10rpx;
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background: rgba(242, 243, 245, 1);
			}

			.goods-name {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(2, 14, 36, 1);
				margin-bottom: 30rpx;
			}

			.goods-line {
				width: 654rpx;
				height: 0rpx;
				border: 2rpx dashed rgba(0, 0, 0, 0.1);
				margin: 40rpx auto;
			}

			.goods-list {
				display: flex;
				flex-direction: column;
				gap: 20rpx;
			}
		}

		.goods-mon {
			width: 702rpx;
			border-radius: 12px;
			background: rgba(255, 255, 255, 1);
			padding: 24rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.box {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.box-name {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(2, 14, 36, 1);
				}

				.box-je {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(245, 99, 81, 1);
				}

				.box-bz {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(100, 101, 102, 1);
				}
			}
		}

		.goods-sk {
			width: 702rpx;
			border-radius: 12px;
			background: rgba(255, 255, 255, 1);
			padding: 24rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.header {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(2, 14, 36, 1);
			}

			.line {
				width: 654rpx;
				height: 2rpx;
				background: rgba(0, 0, 0, 0.1);
				margin: 30rpx auto;
			}

			.box {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.box-name {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(100, 101, 102, 1);
				}

				.box-bz {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(2, 14, 36, 1);
				}
			}

			.goods-button {
				width: 654rpx;
				height: 80rpx;
				border-radius: 1084rpx;
				background: rgba(242, 243, 245, 1);
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(100, 101, 102, 1);
				text-align: center;
				line-height: 80rpx;
				margin-top: 40rpx;
			}
		}
	}
</style>